/*============ header ============*/
.header {
  // 固定定位
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--body-color);
  z-index: var(--z-fixed);
}

/*============ nav ============*/
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);

  &-logo {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-medium);

    &-img {
      width: 1.25rem;
    }
  }

  &-link,
  &-logo,
  &-toggle,
  &-close {
    color: var(--title-color);
  }

  &-toggle {
    font-size: 1.25rem;
    cursor: pointer;
  }

  &-menu {
    // 小于等于767px
    @media screen and (max-width: 767px) {
      position: fixed;
      top: -150%;
      left: 0;
      width: 100%;
      padding: 3.5rem 0;
      background: var(--container-color);
      transition: top .6s;
      z-index: var(--z-fixed);
      border-radius: 0 0 1.5rem 1.5rem;
    }
  }

  &-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
  }

  &-close {
    position: absolute;
    top: .5rem;
    right: .7rem;
    font-size: 1.8rem;
    cursor: pointer;
  }

  &-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1.5rem;
  }

  &-link {
    font-weight: var(--font-black);
    transition: .4s;

    &:hover {
      color: var(--text-color);
    }
  }
}


/* 显示菜单 */
.show-menu {
  top: 0;
}

// 滚动切换头部背景色
.scroll-header {
  background: var(--container-color);
}

// 标签点击
.active-link {
  position: relative;

  &::before {
    position: absolute;
    content: "";
    left: 45%;
    bottom: -.75rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--title-color);
  }
}

